<template>
    <el-dialog v-model="modelValue" width="480px" :before-close="handleClose">
        <template #title>
            <div class="my-header">
                <el-icon color="#FFB414" :size="16" style="vertical-align: middle">
                    <WarningFilled />
                </el-icon>
                <span>提示</span>
            </div>
        </template>
        <section class="block">
            <div class="tip">无法关联创意，请先关联签约审批单</div>
            <el-select
                v-model="addForm.orderId"
                v-loading="isRemoteQuerying"
                :loading="isRemoteQuerying"
                remote-show-suffix
                :remote-method="querySignList"
                filterable
                remote
                :style="{ width: '280px' }"
                placeholder="请选择"
            >
                <el-option v-for="item in signList" :key="item.applyCode" :label="item.label" :value="item.applyCode" />
            </el-select>
        </section>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="handleClose"> 暂不关联 </el-button>
                <el-button type="primary" :loading="submitLoading" :disabled="!addForm.orderId" @click="comfirmOrderId">
                    确认
                </el-button>
            </span>
        </template>
    </el-dialog>
</template>

<script setup lang="ts">
import { ref, reactive, computed, onMounted, watch, defineEmits } from 'vue';
import { getJoinSignApproval, savePlan, getPlanInfo } from '@/api/plan.ts';
import { useStore } from 'vuex';
import { ElMessage } from 'element-plus';
import { fa } from 'element-plus/lib/locale/index';
import { debounce } from 'lodash';

const store = useStore();

const emits = defineEmits(['handleClose', '']);
const userInfo: any = computed(() => store.state.userGroup.userInfo);
const planId = computed(() => store.state.plan.planId);

const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false,
    },
});

const signList = ref([]);
const isRemoteQuerying = ref(false);
const submitLoading = ref(false);
const addForm = reactive({
    orderId: '',
});
const deleted = computed(() => store.state.plan.deleted);

const handleClose = () => {
    emits('handleClose');
};
const comfirmOrderId = async () => {
    submitLoading.value = true;
    try {
        const data = (await getPlanInfo({ planId: planId.value, deleted: deleted.value })) || {};
        await savePlan({ ...data, planId: planId.value, orderId: addForm.orderId });
        if (data.code === '001') {
            emits('handleClose');
        } else {
            ElMessage.success('操作成功');
            emits('handleClose', 'success');
        }
        submitLoading.value = false;
    } catch {
        submitLoading.value = false;
    }
    store.commit('plan/setOrderId', addForm.orderId);
};
const querySignList = debounce(async (keywords = null) => {
    const params = {
        joinTraderCode: userInfo.value.groupCode,
        size: 10,
        keywords,
    };
    isRemoteQuerying.value = true;
    try {
        const data = await getJoinSignApproval(params) || [];
        signList.value = data.map((item) => ({
            ...item,
            label: `${item.brandName}-${item.applyCode}`,
        }));
    } finally {
        isRemoteQuerying.value = false;
    }
}, 200);

querySignList('');
</script>

<style scoped lang="scss">
.my-header {
    span {
        padding-left: 10px;
    }
}
.tip {
    margin-bottom: 15px;
}
</style>
